<template>
  <el-dialog title="发布任务" :visible="releaseTaskVisible" width="70%" :center="true" :close-on-click-modal="false"
             @close="closeDialog">
    <el-form :model="releaseTaskForm" size="small" label-width="120px" label-position="top">
      <el-row :gutter="40">
        <el-col :span="10">
          <el-form-item label="任务名称">
            <el-input v-model="releaseTaskForm.title"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="负责人">
            <el-cascader
                :options="optionsHeader"
                :props="{ expandTrigger: 'hover' }" @change="handleCascaderChange">
            </el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="任务分类">
            <el-select v-model="releaseTaskForm.categoryId" placeholder="请选择" style="width: 100%">
              <el-option
                  v-for="item in optionsTask"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="项目号">
            <el-input v-model="releaseTaskForm.projectSn"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="40">
        <el-col :span="10">
          <el-form-item label="起止时间">
            <el-date-picker style="width: 100% "
                            v-model="time"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="负责人是否汇报">
            <el-radio-group v-model="radio1" size="mini">
              <el-radio-button label="是"></el-radio-button>
              <el-radio-button label="否"></el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="汇报频率" v-if="radio1==='是'">
            <el-radio-group v-model="releaseTaskForm.frequency" size="small" style="text-color:#409EFF ">
              <el-radio-button label="天"></el-radio-button>
              <el-radio-button label="周"></el-radio-button>
              <el-radio-button label="月"></el-radio-button>
              <el-radio-button label="季"></el-radio-button>
              <el-radio-button label="年"></el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="内容" style="width: 100%">
        <el-table :data="releaseTaskForm.contentSummaries" border :show-header="false" style="width: 100%">
          <el-table-column type="index" min-width="12%"></el-table-column>
          <el-table-column min-width="70%">
            <template slot-scope="scope">
              <el-input v-model="scope.row.contentSummary" placeholder="请输入内容"></el-input>
            </template>
          </el-table-column>
          <el-table-column min-width="18%">
            <template slot-scope="scope">
              <el-button @click="notice()" slot="append" type="text" size="small"><i class="el-icon-alarm-clock
" style="width: 50px"></i></el-button>
              <el-button @click="addTaskItem(scope.$index)" type="text" size="small">
                <i class="el-icon-plus"></i>
              </el-button>
              <el-button @click="deleteTaskItem(scope.$index)" type="text" size="small"
                         v-if="releaseTaskForm.contentSummaries.length > 1">
                <i class="el-icon-minus"></i>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item label="里程碑" style="width: 100%">
        <el-table :data="releaseTaskForm.taskMilestones" border :show-header="false" style="width: 100%">
          <el-table-column type="index" min-width="12%"></el-table-column>
          <el-table-column min-width="50%">
            <template slot-scope="scope">
              <el-input v-model="scope.row.name" placeholder="请输入里程碑名称"></el-input>
            </template>
          </el-table-column>
          <el-table-column min-width="20%">
            <template slot-scope="scope">
              <el-date-picker
                  v-model="scope.row.time"
                  type="date">
              </el-date-picker>
            </template>
          </el-table-column>
          <el-table-column min-width="18%">
            <template slot-scope="scope">
              <el-button @click="addMilestone(scope.$index)" type="text" size="small">
                <i class="el-icon-plus"></i>
              </el-button>
              <el-button @click="deleteMilestone(scope.$index)" type="text" size="small"
                         v-if="releaseTaskForm.taskMilestones.length > 1">
                <i class="el-icon-minus"></i>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-row>
        <el-col :span="24">
          <el-form-item label="附件">
            <el-upload
                class="upload-demo"
                :action="uploadAction" :with-credentials="true"
                multiple
                :on-success="handleSuccess"
                :file-list="releaseFileList">
              <el-button><i class="el-icon-paperclip"></i></el-button>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="release" size="mini">发 布</el-button>
      <!--      <el-button type="primary" @click="release" size="mini">提交并继续发布</el-button>-->
      <el-button type="primary" @click="cancle" size="mini">取 消</el-button>
    </div>
  </el-dialog>

</template>

<script>
import {optionsHeader} from "@/utils/optionsHeader";

export default {
  name: "ReleaseTasks",
  props: {
    releaseTaskVisible: Boolean,
    releaseTaskForm: Object,
  },
  data() {
    return {
      radio1: '是',
      uploadAction: `${process.env.VUE_APP_API_BASE_URL}/file/upload`,
      releaseFileList: [],
      optionsHeader: optionsHeader,
      optionsTask: [
        {
          value: '1',
          label: '项目类'
        }, {
          value: '2',
          label: '行政类'
        }
      ],
      time: [],
    }
  }
  ,
  computed: {
    reportCount() {
      if (!this.time[0] || !this.time[1] || !this.releaseTaskForm.frequency) {
        return 0;
      }
      const startDate = new Date(this.time[0]);
      const endDate = new Date(this.time[1]);
      const diffTime = Math.abs(endDate - startDate);
      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
      const adjustedDiffDays = diffDays === 0 ? 1 : diffDays; // 确保至少为1天

      switch (this.releaseTaskForm.frequency) {
        case '天':
          return adjustedDiffDays;
        case '周':
          return Math.ceil(adjustedDiffDays / 7);
        case '月':
          return Math.ceil(adjustedDiffDays / 30);
        default:
          return 0;
      }
    }
  },
  methods: {
    handleCascaderChange(value) {
      this.releaseTaskForm.reportBy = value[value.length - 1];
      console.log(this.releaseTaskForm.reportBy)
    },
    closeDialog() {
      this.$emit('update:releaseTaskVisible', false)
    },
    notice() {
      alert("已增加提醒")
    },
    addTaskItem() {
      this.releaseTaskForm.contentSummaries.push({contentSummary: ''})
    },
    deleteTaskItem(index) {
      if (this.releaseTaskForm.contentSummaries.length != 1)
        this.releaseTaskForm.contentSummaries.splice(index, 1)
      else alert("至少需要保留一条任务吧~~")
    },
    addMilestone() {
      this.releaseTaskForm.taskMilestones.push({name: '', time: ''});
    },
    deleteMilestone(index) {
      if (this.releaseTaskForm.taskMilestones.length > 1) {
        this.releaseTaskForm.taskMilestones.splice(index, 1);
      } else {
        this.$message.error('至少需要保留一个里程碑');
      }
    },
    release() {
      this.$emit('release', {releaseTaskForm: this.releaseTaskForm, time: this.time, reportCount: this.reportCount})
      this.$emit('update:releaseTaskVisible', false)
    },
    cancle() {
      this.$emit('update:releaseTaskVisible', false)
    },
    handleSuccess(response, file, fileList) {
      console.log(response.data)
      const attachment = {
        filePath: response.data,
        source: '发布时'
      }
      this.releaseTaskForm.releaseAttachments.push(attachment)
    },
  },
  mounted() {
    console.log("更改后的任务表单：" + JSON.stringify(this.releaseTaskForm, null, 2))
  }
}
</script>

<style scoped>

</style>